<template>
  <div class="app-container">
    <el-form
      ref="ruleForm"
      class="demo-form-inline"
      :inline="true"
      :model="searchData"
      :rules="rules"
    >
      <el-form-item label="配血单号" prop="MATCH_SHEET_NUM">
        <el-input
          v-model="searchData.MATCH_SHEET_NUM"
          clearable
          placeholder="配血单号"
          @input="clear"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="search">
          查询
        </el-button>
        <el-button :disabled="!bloodMatch" type="default" @click="reset">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-empty
      v-if="!bloodMatch"
      description="暂无任何信息"
      style="margin-top: 120px"
    />
    <el-card v-else>
      <report :blood-match="bloodMatch" />
    </el-card>
  </div>
</template>

<script>
  import Report from '../report'
  import { getBloodMatches } from '@/api/system'
  export default {
    name: 'BloodMatchMakeup',
    components: {
      Report,
    },
    data() {
      return {
        searchData: {
          MATCH_SHEET_NUM: '',
        },
        bloodMatch: null,
        rules: {
          MATCH_SHEET_NUM: [
            { required: true, message: '请输入配血单号', trigger: 'blur' },
          ],
        },
      }
    },
    methods: {
      search() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.getBloodMatches()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      print() {
        this.$message.warning('未连接打印机')
      },
      reset() {
        this.bloodMatch = null
        this.searchData = {
          MATCH_SHEET_NUM: '',
        }
      },
      async getBloodMatches() {
        const MATCH_SHEET_NUM = this.searchData.MATCH_SHEET_NUM
        const { data } = await getBloodMatches({
          MATCH_SHEET_NUM: MATCH_SHEET_NUM,
        })
        this.bloodMatch = data[0]
      },
      clear(value) {
        if (!value) {
          this.bloodMatch = null
        }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
